﻿<style type="text/css">
    html, body {
        height: 100%;
        margin: 0px;
        padding: 0px;
    }
</style>
<div id="main" style="width: 100%;height:100%;"></div>

<script src="~/Content/lib/echarts/echarts.min.js"></script>
<script>
    layui.use(['jquery'], function () {
        var $ = layui.jquery;
        var myChart = echarts.init($("#main")[0]);
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '租金统计',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['园区一', '园区二', '园区三', '园区四', '园区五']
            },
            series: [
                {
                    name: '租金收益',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [
                        { value: 10000, name: '园区一' },
                        { value: 50000, name: '园区二' },
                        { value: 23000, name: '园区三' },
                        { value: 46000, name: '园区四' },
                        { value: 150000, name: '园区五' }
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    })
</script>